<template>
  <div class="flex h-full">
    <a-card class="mr-2" :body-style="{ height: '100%', display: 'flex', flexDirection: 'column', padding: '8px' }">
      <div class="flex justify-between mb-2">
        <a-button type="primary" class="px-2" ghost @click="patientTableOpen = true"><UnorderedListOutlined />患者列表</a-button>
        <a-button class="start-btn px-3" :disabled="store.currentPatient.status !== 0" @click="onChangeStatus(store.currentPatient.lsh, 3)">开始服务</a-button>
        <a-button
          type="primary"
          class="px-3"
          :disabled="!store.currentPatient.status !== 1 && store.currentPatient.status !== 3"
          @click="onChangeEnd(store.currentPatient)"
          >结束服务</a-button
        >
      </div>
      <PatientList ref="patientListRef" @serve="onChangeStatus" @endserve="onChangeEnd" />
    </a-card>
    <div class="flex flex-col flex-1 overflow-hidden">
      <PatientInfoHeader :patient-info="store.currentPatient" :show-badge="false" @change="onChange">
        <div>
          <div class="flex items-center">
            <LabelValue class="" label="流水号" :width="140" :value="store.currentPatient.lsh" />
            <LabelValue class="ml-4" label="科室" :width="140" :value="store.currentPatient.ksmc" :title="store.currentPatient.ksmc" />
            <LabelValue class="ml-4" label="服务项目" :width="800" :value="store.currentPatient.itemName" :title="store.currentPatient.itemName" />
          </div>
          <div class="flex items-center">
            <LabelValue class="" label="门诊号" :width="140" :value="store.currentPatient.jzbh" />
            <LabelValue class="ml-4" label="卡号" :width="140" :value="store.currentPatient.brId" />
            <LabelValue
              class="ml-4"
              :width="200"
              label="登记时间"
              :value="store.currentPatient?.yyrq || store.currentPatient?.yysj ? timeFormat(store.currentPatient?.yyrq, store.currentPatient?.yysj) : '-'"
            />
            <!-- :value="store.currentPatient.yyrq + store.currentPatient.yysj ? store.currentPatient.yysj : ''" -->
            <LabelValue class="ml-4" :width="200" label="登记医师" :value="store.currentPatient.djys" />
            <LabelValue class="ml-4" :width="200" label="执行医师" :value="store.currentPatient.zxys" />
          </div>
        </div>
      </PatientInfoHeader>

      <div class="flex flex-1 mt-2 overflow-hidden">
        <a-card class="flex-1 overflow-auto" :body-style="{ padding: '0 8px', height: '100%', overflow: 'hidden' }">
          <a-tabs v-model:activeKey="activeKey" class="h-full" destroy-inactive-tab-pane>
            <a-tab-pane key="1">
              <template #tab>
                <div class="px-5 text-center">病历</div>
              </template>
              <TabCase />
            </a-tab-pane>
          </a-tabs>
        </a-card>
        <a-card class="w-72 ml-2 history-card" :class="historyExpand ? 'history-expand' : ''" :body-style="{ paddingTop: 0 }">
          <div class="history-expand-btn" @click="() => (historyExpand = !historyExpand)">
            <DoubleLeftOutlined v-if="historyExpand" />
            <DoubleRightOutlined v-else />
          </div>
          <div v-if="historyExpand" class="pt-12 text-primary font-semibold">历史</div>
          <a-tabs v-model:activeKey="leftActiveKey" centered>
            <a-tab-pane key="1">
              <template #tab>
                <div class="px-5 text-center">历史</div>
              </template>
              <div class="overflow-auto" style="height: calc(100vh - 200px)">
                <HistoryCase />
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </div>
    </div>
    <PatientTable v-model:open="patientTableOpen" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { UnorderedListOutlined, DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import PatientInfoHeader from '@/components/business/PatientInfoHeader'
import { post } from '@/utils/request'
import TabCase from './components/TabCase'
import PatientList from './components/PatientList'
import PatientTable from './components/PatientTable'
import HistoryCase from './components/HistoryCase'
import useStore from './store'

const historyExpand = ref(true)
const store = useStore()
const patientListRef = ref(null)
const activeKey = ref('1')
const patientTableOpen = ref(false)
const tabOpen = ref(false)
// const searchButton = ref([
//   { state: 0, title: '候诊中' },
//   { state: 3, title: '已完诊' },
//   { state: 4, title: '待回诊' }
// ])
const onChangeStatus = async (lsh, status) => {
  const { code, msg } = await post('/course/courseRegister/doCancelCourseRegister', { lsh, status })
  if (code !== 0) return message.error(msg || '操作失败')
  message.success(msg || '操作成功')
  if (status === 1) {
    patientListRef.value?.queryList()
  } else {
    patientListRef.value?.queryList(1)
  }
}
const onChangeEnd = (item) => {
  if (item.status === 3) {
    onChangeStatus(item.lsh, 1)
  } else {
    onChangeStatus(item.lsh, 3)
    onChangeStatus(item.lsh, 1)
  }
}
const timeFormat = (value1, value2) => {
  return dayjs(new Date(value1)).format('YYYY-MM-DD') + ' ' + value2
}

const onChange = () => {
  patientListRef.value?.queryList()
}
watch(
  () => store.currentPatient,
  () => {
    tabOpen.value = store.currentPatient?.open ? true : false
  }
)
</script>
<style lang="less" scoped>
.history-card {
  transition: all 0.3s;
}

.history-expand {
  width: 56px !important;
  :deep(.ant-tabs) {
    visibility: hidden;
  }
}
.history-expand-btn {
  position: absolute;
  top: 4px;
  right: 12px;
  z-index: 99;
  padding: 8px;
  color: var(--primary-color);
  background-color: var(--secondary-color);
  border-radius: 8px;
  cursor: pointer;
}

.start-btn {
  color: #fff;
  background-color: #369c17;
  border: 1px solid #369c17;
  &:hover {
    color: #fff;
    background-color: #369c17dd;
  }
  &:disabled {
    color: var(--disabled-text-color);
    background-color: var(--disabled-bg-color);
    border-color: var(--disabled-text-color);
  }
}
</style>
